<template>
  <view class="container">
    <!-- 表单 -->
    <view class="login-form">
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="goods_name" maxlength="20" placeholder="请输入商品名称" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="categoryIds" maxlength="20" placeholder="请输入商品分类" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="imagesIds" maxlength="20" placeholder="请输入商品图片" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="goods_no" maxlength="20" placeholder="请输入商品编码" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="spec_type" maxlength="20" placeholder="请输入商品规格" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="goods_price" maxlength="20" placeholder="请输入商品价格" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="line_price" maxlength="20" placeholder="请输入划线价" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="stock_num" maxlength="20" placeholder="请输入商品库存" />
      </view>
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="content" maxlength="20" placeholder="请输入商品详情" />
      </view>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as Verify from '@/utils-shop/verify'
  import * as GoodsApi from '@/apishop/goods'
  
  export default {
    data() {
      return {
		goods_name: '',
		categoryIds: [10001],
		imagesIds: [10001],
		goods_no: '',
		spec_type: 10,
		stock_num: 0,
		goods_price: 0,
		line_price: 0,
		content: '',
		is_enable_grade: 0,
		serviceIds: [],
        // 加载中
        isLoading: false,
        // 按钮禁用
        disabled: false
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
    },

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
    },

    methods: {
	  // 表单验证
	  formValidation() {
	    const app = this
	    	
		if (Verify.isEmpty(app.goods_name)) {
		  this.$toast('请先输入商品名称')
		  return false
		}
		if (!Verify.isPositiveInteger(app.goods_price)) {
		  this.$toast('请先输入商品价格')
		  return false
		}
		if (!Verify.isPositiveInteger(app.stock_num)) {
		  this.$toast('请先输入商品库存')
		  return false
		}
		return true
	  },
	  
      // 表单提交
      handleSubmit() {
        const app = this
        if (!app.isLoading && app.formValidation()) {
          app.submitLogin()
        }
      },
	  
      // 确认登录
      submitLogin() {
        const app = this
        app.isLoading = true
        GoodsApi.add({
        	goods_name: app.goods_name,
        	goods_no: app.goods_no,
        	imagesIds: app.imagesIds,
        	categoryIds: app.categoryIds,
        	imagesIds: app.imagesIds,
        	goods_no: app.goods_no,
        	spec_type: app.spec_type,
        	stock_num: app.stock_num,
        	goods_price: app.goods_price,
        	line_price: app.line_price,
        	content: app.content,
        	is_enable_grade: app.is_enable_grade,
        	serviceIds: app.serviceIds,
          })
          .then(result => {
            // 显示登录成功
            app.$toast(result.message)
            // 跳转回原页面
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          })
          .catch(err => {
            if (err.result.data.isBack) {
              // 跳转回原页面
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            }
          })
          .finally(() => app.isLoading = false)
      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 50rpx;

    .title {
      color: #191919;
      font-size: 50rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 25rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 25rpx;
    height: 96rpx;

    &--input {
      font-size: 26rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }
  }

  /* 底部操作栏 */

  .footer {
    margin-top: 60rpx;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }

  }
</style>
